<template>
  <div class="contain-wrap">


<!--    <myNavbar title="转账"></myNavbar>-->
    <div>
      <div style="background-color: #b2985b" class="status-bar" :style="{height:statusBarHeight + 'px'}"></div>
      <navbar  class="navbar" :style="{backgroundColor: '#b2985b' }">
        <navbar-item type="left" @click="backClick" >
          <div v-if="back">
            <text class="iconLeft" >&#xe659;</text>
          </div>
        </navbar-item>
        <navbar-item type="title" >
          <text style="color: #fff" class="text">转账{{title}}</text>
        </navbar-item>
      </navbar>
    </div>


    <div class="contain">
      <div class="main">
        <div class="main-item">
          <div class="main-item-title" ><text class="main-item-title-text">付款账户</text></div>
          <div class="main-item-contian">
            <text class="main-item-contian-text1">4367***1575</text>
            <text class="main-item-contian-text2">人民币 活期储蓄 560.89</text>
          </div>
          <div class="main-item-icon" >
<!--            <image class="main-item-icon-image" ></image> -->
            <text class="iconLeft" >&#xe65e;</text>
          </div>
        </div>
        <div class="main-item">
          <div class="main-item-title"><text class="main-item-title-text">收款户名</text></div>
          <div class="main-item-contian" >
<!--            <input value="" placeholder="请输入收款户名" ></input> -->
            <input class="realName_item_content" placeholder="请输入收款户名"/>
          </div>
          <div class="main-item-icon" >
<!--            <image class="main-item-icon-image" ></image> -->
            <text class="iconLeft" >&#xe65e;</text>
          </div>
        </div>
        <div class="main-item">
          <div class="main-item-title"><text class="main-item-title-text">付款账户</text></div>
          <div class="main-item-contian" >
<!--            <input value="" placeholder="请输入收款账号或手机"></input>-->
            <input class="realName_item_content" placeholder="请输入收款账号或手机"/>
          </div>
          <div class="main-item-icon" >
<!--            <image class="main-item-icon-image" ></image> -->
            <text class="iconLeft" >&#xe65e;</text>

          </div>
        </div>
      </div>


      <div class="section">
        <div class="section-top">
          <div class="section-top-money">
            <text class="section-top-money-text">转账金额</text>
          </div>
          <div class="section-top-procedures">
            <text class="section-top-procedures-text">免手续费</text>
          </div>
        </div>

        <div class="section-bottom">
          <div class="section-bottom-accounts">
            <div class="section-bottom-accounts-input-wrap">

              <input class="realName_item_content section-bottom-accounts-input" placeholder="请输入转账金额"/>
<!--              <input class="section-bottom-accounts-input" value="" placeholder="请输入转账金额" ></input>-->
            </div>
          </div>
          <div class="section-bottom-message">
            <text class="section-bottom-message-text">添加转账留言</text>
            <div class="section-bottom-message-iamge-wrap">
              <image  class="section-bottom-message-iamge" src=""></image>
            </div>
          </div>
        </div>
      </div>

      <div class="footer">
        <div class="footer-title">
          <text class="footer-title-text">温馨提示</text>
        </div>
        <div class="footer-contain">
          <text class="footer-contain-text">请勿轻易向陌生人转账,请勿相信以兼职,投资为借口或假冒客服,公检法、熟人等骗局, 请仔细核实收款方...</text>
          <div><image src="" style="height:30px;with:30px;" ></image></div>
        </div>
      </div>
      <div class="footer footer-button">
        <div class="footer-button-wrap">
          <text class="footer-button-text">确定</text>
        </div>
      </div>

    </div>
  </div>
</template>
<script>

// import myNavbar from "../../../components/myNavbar/myNavbar.vue";

export default {
  data(){
    return{
      back:true,
      statusBarHeight: eeui.getStatusBarHeightPx(),
    }
  },
  created() {
    this.initIconFont()
  },
  // components: { myNavbar },
  mounted(){
  },
  methods:{
    backClick(){
      if(this.back){
        eeui.closePage()
      }

    }

  }

}
</script>
<style scoped>
.navbar {
  background-color: yellow;
  width: 750px;
  height: 100px;
}
.text {
  font-size: 36px;
}
.status-bar {
  background-color: white;
}
.iconLeft{
  color: black;
  font-size: 30px;
  padding-left: 30px;
  padding-right: 30px;
  font-family: iconfont2;
}
.realName_item_content {
  flex: 1;
  height: 60px;
  font-size: 26px;
}





.contain-wrap{
  background-color: #ecf1f5;
}
.main{
  padding-right: 40px;
  padding-left: 40px;
  padding-top: 20px;
  background-color:#ffffff;
}
.main-item{
  display: flex;
  flex-direction: row;
  border-bottom-color:#eaeaea;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.main-item-contian{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 380px;
}

.main-item-title{
  padding-top: 40px;
  padding-bottom: 40px;
  width:220px;
}
.main-item-title-text{
  font-size:30px;
}
.main-item-contian-text1{
  font-size: 26px;
  color: #4b4b4b;
}
.main-item-contian-text2{
  font-size: 26px;
  color:#9d9d9d;
}

.main-item-icon{
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.main-item-icon-image{
  width: 30px;
  height: 30px;
  background-color: yellow;
}
.section-top{
  margin-left: 40px;
  margin-right: 40px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  display: flex;
}
.section-top-money{
  padding-top:50px;
  padding-bottom: 50px;
}
.section-top-money-text{
  font-size:30px;

}
.section-top-procedures{
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  right: 0;
  /*left: 50%; top: 50%;*/
  /*transform: translate(-50%, -50%);*/

}
.section-top-procedures-text{
  font-size: 25px;
  color:#636364;
}
.section-bottom-accounts{
  background-color:#ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.section-bottom-accounts-input-wrap{
  padding-left: 195px;
  padding-right: 195px;
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom-color: #efefef;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.section-bottom-accounts-input{
  width: 250px;
}
.section-bottom{
  padding-left: 40px;
  padding-right: 40px;
}
.section-bottom-message{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #ffffff;
}
.section-bottom-message-text{
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 25px;
  color: #d9c9a5;
}
.section-bottom-message-iamge{
  width: 30px;
  height: 30px;
  background-color: pink;
}
.section-bottom-message-iamge-wrap{
  position: absolute;
  right: 15px;
}






.footer{
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 100px;
  margin-top: 40px;
  background-color:#ffffff;
}

.footer-contain-text{
  margin-top: 30px;
  font-size:28px;
  color: #d6d6d6;
}
.footer-button{
  margin-top: 0;
  padding-top: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-top-color:#ededed;
  border-top-style: solid;
  border-top-width: 2px;

}
.footer-button-wrap{
  margin-top: 60px;
  margin-bottom: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 500px;
  border-style: solid;
  border-color: #e2d9c2;
  border-width: 1px;
  border-radius: 50px;
}
.footer-button-text{
  font-size: 40px;
  color:#e2d9c4;
}
</style>
